<template>
  <div class="mask-box">
    <el-tooltip :content="content" placement="top-start">
      <div class="mask" :style="maskStyle"></div>
    </el-tooltip>
  </div>
</template>

<script>
import moment from 'moment'
import { formatDate } from 'pub-bbx-utils';
import { safeNewDate } from '@src/util/time';
export default {
  name: 'time-mask',
  inject: ['ganttChartInstance'],
  data() {
    return {
      maskStyle: {},
      content: '',
    }
  },
  props: {
    ganttData: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    ganttData: {
      immediate: true,
      deep: true,
      handler() {
        this.$nextTick(()=>{
          this.setMaskStyle() 
        })
      }
    }
  },
  methods: {
    setMaskStyle() {
      const { startTime, endTime } = this.ganttChartInstance.timeSectionDayJs
      if(this.ganttChartInstance.timeSection) {
        const [formatStartTime, formatEndTime] = this.ganttChartInstance.timeSection
        this.content = `${formatDate(safeNewDate(formatStartTime), 'yyyy-MM-dd HH:mm')}${this.$t('common.base.to')}${formatDate(safeNewDate(formatEndTime), 'yyyy-MM-dd HH:mm')}`
      }
      // 完成时间和开始时间间隔
      let time = moment(moment(endTime)).diff(startTime, 'second')
      // 开始时间已经过去的分钟
      let diff = (moment(startTime).hour() * 60) + moment(startTime).minute()
      this.maskStyle = {
        left: `${ this.ganttChartInstance.baseHour * diff / 60 }px`,
        width : `${ this.ganttChartInstance.baseHour * time / 3600 }px`, 
        height: `${ this.$parent?.$el?.clientHeight }px`
      } 
    }
  }
}
</script>

<style scoped lang="scss">
  .mask-box{
    /*pointer-events: none;*/
    z-index: 110;
    position: sticky;
    top: 0;
  }
  .mask{
    position: absolute;
    background: #67C23A;
    opacity: 0.6;
    height: 40px;
   /* pointer-events:none;*/
  }
</style>
